<template>
  <div class="login-container">
    <!--
      没有加name之前，都要用 v-enter、v-enter-active
      加上name之后，v 就改为 name属性的属性值
    -->
    <transition name="login">
      <div class="login" v-if="show">
        <div class="l"></div>
        <div class="r">
          <el-tabs stretch v-model="type">
            <el-tab-pane label="短信登录" name="sms">
              <!-- 表单 -->
              <el-input placeholder="手机号" v-model="formData.phone" />
              <el-input placeholder="验证码" @keyup.native.enter="login" v-model="formData.code" >
                <el-button
                  slot="append"
                  :disabled="!formData.phone || sendTime < 60"
                  @click="onSend"
                >{{ sendLabel }}</el-button>
              </el-input>
              <el-button type="primary" @click="login"  :loading="loading">登录</el-button>
            </el-tab-pane>
            <el-tab-pane label="密码登录" name="password">
              <el-input placeholder="账号" v-model="formData.username" />
              <el-input
                type="password"
                placeholder="密码"
                v-model="formData.password"
                @keyup.native.enter="login"
              />
              <el-button type="primary" @click="login"  :loading="loading">登录</el-button>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      type: "sms", // 手机号短信登录sms，用户名密码登录password
      formData: {
        phone: "",
        code: "",
        username: "",
        password: "",
      },
      sendTime: 60,
      timerId: null,
      show: false,
      loading: false,  // 是否正在请求，默认 false
    };
  },
  computed: {
    sendLabel() {
      if (this.sendTime < 60) {
        return this.sendTime + "秒后重发";
      }
      return "发送验证码";
    },
  },
  methods: {
    onSend() {
      // 先校验手机号，通过校验后调用发送验证码接口
      let reg = /^1\d{10}$/;
      if (!reg.test(this.formData.phone)) {
        return this.$message.error("手机号格式不正确");
      }

      this.getCode();
      // todo: 先调用发送验证码接口
      this.sendTime--;
      this.timerId = setInterval(() => {
        this.sendTime--;
        if (this.sendTime === 0) {
          clearInterval(this.timerId);
          this.sendTime = 60;
        }
      }, 1000);
    },
    getCode() {
      this.axios.post("/code", {
        phone: this.formData.phone,
      });
    },
    //
    login() {
      console.log(this.loading)
      if (this.loading) return;
      this.loading = true;
      console.log(this.type, this.formData.username, this.formData.password);
      const params = {
        type: this.type,
      };
      if (this.type === "sms") {
        params.phone = this.formData.phone;
        params.code = this.formData.code;
      } else {
        params.username = this.formData.username;
        params.password = this.formData.password;
      }

      this.axios.post("/login", params).then((data) => {
        // console.log(res);
        // const { data } = res;
        // console.log(data);
        if (data.code === 0) {
          console.log(data)
          this.show = false;
          setTimeout(() => {
            this.$router.push("/main");
          }, 1500);
        }
        //  else {
        //   this.$message.error(data.msg);
        // }

      }).finally(() => {
        this.loading = false;
      });

      // const xhr = new XMLHttpRequest();
      // xhr.open('post', '/equipment/login', true);
      // xhr.onreadystatechange = () => {
      //     if (xhr.readyState === 4 && xhr.status === 200) {
      //       const data = JSON.parse(xhr.responseText);
      //       console.log(data);
      //       if (data.code === 0) {
      //         this.$router.push('/main')
      //       } else {
      //         this.$message.error(data.msg);
      //       }
      //     }
      // }
      // xhr.send(JSON.stringify({
      //   code: '654321',
      //   phone: '13800138001',
      //   type: 'sms'
      // }));
    },
  },
  mounted() {
    // setTimeout(() => {
    //   document.querySelector('.login').classList.add('show');
    // }, 200)
    this.show = true;
  },
};
</script>

<style lang="sass">
.login-container
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: url(~@/assets/img/login-bg.png) no-repeat
  background-size: cover
  display: flex
  justify-content: center
  align-items: center
  .login
    width: 800px
    height: 400px
    display: flex
    border-radius: 10px
    overflow: hidden
    box-shadow: 0 0 10px 0 #ddd
    background: #fff
    // opacity: 0
    // transform: translateY(10%) scale(.8)
    // transition: 1.5s
    // &.show
    //   opacity: 1
    //   transform: translateY(0) scale(1)
    .l
      flex: 0 0 490px
      background: url(~@/assets/img/login-left.png) no-repeat
      background-size: cover
    .r
      padding: 60px 40px
      flex: 1
      .el-input
        margin-bottom: 15px
      .el-tab-pane > .el-button
        width: 100%

      // 解决鼠标移入的时候覆盖上边框的问题
      .el-input-group .el-button
        display: block
  // 显示之前的状态
  .login-enter
    opacity: 0
    transform: translateY(10%) scale(.8)
  // 在显示的整个过程都有的 class，定义过度
  .login-enter-active
    transition: 1.5s
  // 下面两个和标签本身样式一样
  // .v-enter-to
  // .v-leave
  // 隐藏/离开的样式
  .login-leave-active
    transition: 1.5s
  // 离开之后的样式
  .login-leave-to
    opacity: 0
    transform: translateY(-20%) scale(.8)
</style>
